<template>
  <div class="main-box">
    <el-button @click="test">test</el-button>
    <ToolBar
      :data="data"
      @data-update="dataImport"
      @data-clear="dataImport({ 'nodeList': [], 'lineList': [] })" />
    <el-tabs v-model="editID" type="card" style="width: 180vh; margin: 0 auto; text-align: center; padding: 0 5;"
      @tab-click="tabChange"
      @tab-remove="removeSubEdit">
      <el-tab-pane
        label="全局"
        :key="'0'"
        :name="'0'"></el-tab-pane>
      <el-tab-pane closable
        v-for="sub in subList.nodeList"
        :key="sub.id"
        :name="sub.id"
        :label="sub.nodeName">
      </el-tab-pane>
    </el-tabs>
    <MSFG
      :sub="isSub"
      :subID="editID"
      :data="editData"
      :refresh="refresh"
      :linkDataReserve.sync="linkDataReserve"
      @data-update="dataUpdate"
      @edit-sub="addSubEdit" />
  </div>
</template>

<script>
import ToolBar from './ToolBar.vue'
import MSFG from './MSFG.vue'
export default {
  components: {
    MSFG: MSFG,
    ToolBar: ToolBar
  },
  data: function () {
    return {
      refresh: 0,
      linkDataReserve: false,
      data: {
        nodeList: [],
        lineList: []
      },
      editID: '0',
      subList: {
        idList: [],
        nodeList: []
      }
    }
  },
  computed: {
    isSub () {
      return this.editID === '0' ? false : true
    },
    editNodeList () {
      return this.data.nodeList.filter((node) => {
        return node.subID === this.editID
      })
    },
    editLineList () {
      return this.data.lineList.filter((link) => {
        return link.subID === this.editID
      })
    },
    editData () {
      return {
        nodeList: this.editNodeList,
        lineList: this.editLineList
      }
    }
  },
  methods: {
    dataImport (data) {
      this.data = data
      this.editID = '0'
      this.subList = {
        idList: [],
        nodeList: []
      }
      this.linkDataReserve = true
      this.refresh ++
    },
    tabChange (tab) {
      this.editID = tab.name
      this.linkDataReserve = true
      this.refresh ++
    },
    addSubEdit (uuid) {
      let sub
      let index = this.subList.idList.indexOf(uuid)
      if (index === -1) {
        sub = this.nodeSearch(uuid)
        this.subList.idList.push(sub.id)
        this.subList.nodeList.push(sub)
      } else {
        sub = this.subList.nodeList[index]
      }
      this.editID = sub.id
      this.linkDataReserve = true
      this.refresh ++
    },
    removeSubEdit (uuid) {
      let index = this.subList.idList.indexOf(uuid)
      this.subList.idList.splice(index, 1)
      this.subList.nodeList.splice(index, 1)
      if (this.editID === uuid) {
        this.editID = '0'
        this.linkDataReserve = true
        this.refresh ++
      }
    },
    nodeSearch (uuid) {
      let _node
      this.data.nodeList.forEach((node) => {
        if (node.id === uuid) {
          _node = node
        }
      })
      return _node
    },

    dataUpdate (info) {
      if (info.type === 'add-node') {
        this.data.nodeList.push(info.data)
      } else if (info.type === 'delete-node') {
        this.data.nodeList.some((node, index) => {
          if (node.id === info.data) {
            this.data.nodeList.splice(index, 1)
            return true
          } else {
            return false
          }
        })
      } else if (info.type === 'set-node-name') {
        this.data.nodeList.some((node) => {
          if (node.id === info.data.id) {
            node.nodeName = info.data.name
            return true
          } else {
            return false
          }
        })
      } else if (info.type === 'set-node-position') {
        this.data.nodeList.some((node) => {
          if (node.id === info.data.id) {
            node.left = info.data.pos[0] + 'px'
            node.top = info.data.pos[1] + 'px'
            return true
          } else {
            return false
          }
        })
      } else if (info.type === 'add-line') {
        this.data.lineList.push(info.data)
      } else if (info.type === 'delete-line') {
        this.data.lineList.some((line, index) => {
          if (line.from === info.data.sourceId && line.to === info.data.targetId) {
            this.data.lineList.splice(index, 1)
            return true
          } else {
            return false
          }
        })
      } else if (info.type === '') {}
    },
    test () {
      console.log(this.data)
      console.log(this.editData)
    }
  },
  mounted () {

  },
  watch: {

  }
}
</script>

<style>
div.el-tabs__header.is-top{
  margin: 0 auto;
}
</style>